<template>
  <v-virtual-scroll
    ref="listRef"
    style="background-color: transparent; height: calc(100vh - 130px)"
    app
    v-scroll.self="handleScroll"
    :items="renderList"
  >
    <template v-slot:default="{ item, index }">
      <jc-list-item
        :key="item._id"
        :item="item"
        @itemclick="() => itemClick(item, index)"
        @savemeclick="saveMe"
      ></jc-list-item>
    </template>
  </v-virtual-scroll>
</template>

<script setup>
import JcListItem from "@/components/JcListItem.vue";
import { useGoTo } from "vuetify";
import { computed, onActivated, ref } from "vue";

import { toPlayPage } from "@/utils/utils";
const goto = useGoTo();
const listRef = ref(null);

const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
});
const scrollTop = ref(0);
const emit = defineEmits(["saveme"]);

onActivated(() => {
  goto(scrollTop.value, { container: listRef.value.$el });
});

const renderList = computed(() => {
  return props.list;
});
function saveMe(id) {
  emit("saveme", id);
}
function itemClick(item) {
  toPlayPage(item);
}

function handleScroll(e) {
  scrollTop.value = e.target.scrollTop;
}
</script>
